<template>
	<view class="container">

		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="alignmentFormData" label-width="80px">
				<uni-forms-item label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名" required name="name">
					<uni-easyinput v-model="alignmentFormData.name" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required name="idNumber">
					<uni-easyinput v-model="alignmentFormData.idNumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="mobile">
					<uni-easyinput v-model="alignmentFormData.mobile" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别">
					<uni-data-checkbox style="padding: 6px 0;" v-model="alignmentFormData.gender"
						:localdata="genders" />
				</uni-forms-item>
				<uni-forms-item label="社&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区" required>
					<view class="example-body">
						<search-select :candidates="groupsList" placeholder="请选择" @input="onSearch"
							@select="onSelect"></search-select>
					</view>
					<view class="tips" v-if="groupMessage">{{ groupMessage }}</view>
				</uni-forms-item>
				<!-- 				<uni-forms-item label="楼栋号" required name="buildNumber">
					<uni-easyinput v-model="alignmentFormData.buildNumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="单元号" required name="unitNumber">
					<uni-easyinput v-model="alignmentFormData.unitNumber" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="门牌号" required name="houseNumber">
					<uni-easyinput v-model="alignmentFormData.houseNumber" placeholder="请输入" />
				</uni-forms-item> -->
				<uni-forms-item label="照&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片" required>
					<uni-file-picker v-model="avatarBytes" file-mediatype="image" mode="grid" file-extname="png,jpg"
						:limit="1" @select="select" @delete="delImage" />
					<view class="tips">提示：请上传带有人脸的照片</view>
					<view class="tips" v-if="photoMessage">{{ photoMessage }}</view>
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>
<script>
	import searchSelect from '@/component/search-select.vue'

	import {
		request,
		baseURL
	} from '../../api/request';
	export default {
		data() {
			return {
				groupsList: [],
				alignmentFormData: {
					openId: uni.getStorageSync('openId'),
					type: 1,
					name: '',
					gender: 2,
					mobile: '',
					idNumber: "",
					groupId: "",
					avatarBytes: "",
					// buildNumber: "",
					// unitNumber: "",
					// houseNumber: "",
				},
				avatarBytes: "",
				photoMessage: "",
				groupMessage: "",
				genders: [{
					text: '男',
					value: 2,
				}, {
					text: '女',
					value: 1,
				}],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idNumber: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
				},


			}
		},
		components: {
			'search-select': searchSelect
		},
		created() {
			this.getGroupList();
		},
		methods: {
			getGroupList() {
				request({
					url: '/api/v1/people-group/select',
					method: "POST"
				}).then(res => {
					console.log(res);
					this.groupsList = res.data
				})
			},
			onSearch(value) {
				this.getGroupList();

			},
			onSelect(val) {
				this.alignmentFormData.groupId = val
			},
			submit(ref) {

				this.$refs[ref].validate().then(res => {
					if (this.alignmentFormData.avatarBytes == "") {
						this.photoMessage = "请选择照片"
					}
					if (this.alignmentFormData.groupId == "") {
						this.groupMessage = "请选择社区"
					}
					if (this.alignmentFormData.avatarBytes !== "" && this.alignmentFormData.groupId !== "") {
						request({
							url: "/api/v1/people-info",
							method: "POST",
							data: this.alignmentFormData
						}).then(res => {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
							if (res.code == 1) {
								setTimeout(function() {
									// uni.redirectTo({
									// 	url: '/pages/home/index'
									// });
									uni.navigateBack({
										delta: 1
									});
								}, 1000)

							}

						})
					}

				}).catch(err => {
					console.log('err', err);
				})
			},
			select(e) {
				uni.uploadFile({
					url: baseURL + '/api/v1/common/upload',
					filePath: e.tempFilePaths[0],
					name: 'files',
					success: (res) => {
						let result = JSON.parse(res.data).data[0]
						console.log(result);
						this.alignmentFormData.avatarBytes = result;
						uni.showToast({
							title: '上传成功'
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			delImage() {
				this.alignmentFormData.avatarBytes = ""
			}
		}
	}
</script>
<style lang="scss">
	.uni-forms-item__content {
		margin-top: 5px;
	}

	.example {
		padding: 15px;
		height: 100vh;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.tips {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1.5;
	}
</style>